<template>
  <div class="data-form-container" id="blog-table-container">
    <form action="" @submit.prevent="() => beforeHandleSubmit()">
      <div class="form-item">
        <div class="nick-name">
          <input
            type="text"
            placeholder="请输入用户昵称："
            :maxlength="nickLen"
            v-model="dataForm.nickname"
          />
          <span class="nickname-tip tip"
            >{{ dataForm.nickname.length }}/{{ nickLen }}</span
          >
        </div>
        <div class="error">{{ error.nickNameError }}</div>
      </div>
      <div class="form-item">
        <div class="message-area">
          <textarea
            :maxlength="inputlength"
            placeholder="请输入评论内容"
            v-model="dataForm.content"
            cols="30"
            rows="10"
          ></textarea>
          <span class="content-tip tip"
            >{{ dataForm.content.length }}/{{ inputlength }}</span
          >
        </div>
        <div class="error">{{ error.inputError }}</div>
      </div>
      <div class="form-item">
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { defineProps, reactive, watch } from "vue";
const dataForm = reactive({
  nickname: "",
  content: "",
});

const error = reactive({
  nickNameError: "",
  inputError: "",
});
const { nickLen, inputlength, handleSubmit } = defineProps({
  nickLen: {
    type: Number,
    default: 10,
  },
  inputlength: {
    type: Number,
    default: 300,
  },
  handleSubmit: {
    type: Function,
  },
});

watch(
  dataForm,
  () => {
    if (dataForm.content) {
      error.inputError = "";
    }
    if (dataForm.nickname) {
      error.nickNameError = "";
    }
  },
  { deep: true }
);

function beforeHandleSubmit() {
  if (!dataForm.nickname.length || !dataForm.content.length) {
    if (!dataForm.nickname.length) {
      error.nickNameError = "昵称不能为空！";
    }
    if (!dataForm.content.length) {
      error.inputError = "评论内容不能为其空!";
    }
    return;
  }
  handleSubmit(dataForm);
  dataForm.content = "";
  dataForm.nickname = "";
}
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.data-form-container {
  padding: 20px;

  .form-item {
    position: relative;
    margin-bottom: 10px;
    width: 100%;

    button {
      outline: none;
      background: @primary;
      color: #fff;
      width: 100px;
      height: 34px;
      border-radius: 9px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border: none;
      transition: 0.2s;

      &:hover {
        background: darken(@primary, 10%);
      }

      &:disabled {
        background: lighten(@primary, 20%);
        cursor: not-allowed;
      }
    }

    .nick-name {
      width: 50%;
      height: 40px;
      position: relative;

      input {
        padding: 0 15px;
        border: 1px dashed @gray;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        color: @words;
        font-size: 15px;
        border-radius: 5px;

        &:hover {
          border-color: @primary;
        }
      }
    }

    .message-area {
      width: 100%;
      position: relative;
      height: 123px;

      textarea {
        resize: none;
        padding: 8px 15px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-size: 15px;
        color: @gray;
        border: 1px dashed @gray;
        border-radius: 5px;

        &:hover {
          border-color: @primary;
        }
      }
    }
  }
}

.tip {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 12px;
  color: @gray;
}

.error {
  color: @danger;
  font-size: 15px;
  height: 20px;
  line-height: 20px;
  margin-top: 6px;
}
</style>
